<template>
  <div class="common-layout">
    <el-container style="width: 100vw; height: 100vh; display: flex">
      <el-aside width="auto">
        <Menu :menuButton="menuButton" :backgroundColor="backgroundColor" :textColor="textColor"></Menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header :style="{ backgroundColor: `${backgroundColor}` }">
          <div class="left">
            <!-- 菜单收缩 -->
            <el-icon @click="menuShrink" v-if="menuButton">
              <svg t="1698024600257" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="6383" width="200" height="200">
                <path
                    d="M106.24 535.893333l165.546667 115.626667c20.053333 14.08 45.653333 0 45.653333-22.613333V395.093333c0-5.973333-2.133333-11.946667-5.546667-17.066666-9.386667-12.373333-27.306667-14.933333-40.106666-5.546667l-165.546667 115.626667c-14.08 11.093333-14.08 33.706667 0 47.786666zM129.28 213.333333h785.066667c18.773333 0 34.133333-15.36 34.133333-34.133333s-15.36-34.133333-34.133333-34.133333h-785.066667c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133333zM129.28 878.933333h785.066667c18.773333 0 34.133333-15.36 34.133333-34.133333s-15.36-34.133333-34.133333-34.133333h-785.066667c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133333zM419.413333 435.2h494.933334c18.773333 0 34.133333-15.36 34.133333-34.133333s-15.36-34.133333-34.133333-34.133334h-494.933334c-18.773333 0-34.133333 15.36-34.133333 34.133334s15.36 34.133333 34.133333 34.133333zM419.413333 657.066667h495.36c18.773333 0 34.133333-15.36 34.133334-34.133334s-15.36-34.133333-34.133334-34.133333H419.413333c-18.773333 0-34.133333 15.36-34.133333 34.133333v0.426667c0 18.346667 15.36 33.706667 34.133333 33.706667z"
                    fill="#4C4C4C" p-id="6384"></path>
              </svg>
            </el-icon>
            <el-icon @click="menuShrink" v-else>
              <svg t="1698026659453" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="8193" width="200" height="200">
                <path
                    d="M937.386667 488.106667L772.266667 372.48c-12.8-9.386667-30.293333-6.826667-40.106667 5.546667-3.84 4.693333-5.546667 10.666667-5.546667 17.066666v233.813334c0 22.613333 25.6 36.693333 45.653334 22.613333l165.546666-115.626667c14.08-14.08 14.08-36.693333-0.426666-47.786666zM914.346667 213.333333h-785.066667c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133333h785.066667c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133333zM914.346667 878.933333h-785.066667c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133333h785.066667c18.773333 0 34.133333 15.36 34.133333 34.133333s-14.933333 34.133333-34.133333 34.133333zM624.213333 435.2h-494.933333c-18.773333 0-34.133333-15.36-34.133333-34.133333s15.36-34.133333 34.133333-34.133334h494.933333c18.773333 0 34.133333 15.36 34.133334 34.133334s-14.933333 34.133333-34.133334 34.133333zM624.64 657.066667H129.28c-18.773333 0-34.133333-15.36-34.133333-34.133334s15.36-34.133333 34.133333-34.133333h495.36c18.773333 0 34.133333 15.36 34.133333 34.133333v0.426667c-0.426667 18.346667-15.36 33.706667-34.133333 33.706667z"
                    fill="#4C4C4C" p-id="8194"></path>
              </svg>
            </el-icon>
            <!-- <img src="../assets/images/收缩.png" alt="" class="shrink" @click="menuShrink" /> -->
            <BreadCrumbCom class="bread" :textColor="textColor"></BreadCrumbCom>
          </div>
          <!-- ############################## 消息通知 ##############################-->
          <div class="df jcsb aic" style="cursor: pointer">
            <div style="display: flex; justify-content: end; margin-right: 20px" v-if="noticeContent != null">
              <div class="notic-bar">
                <div class="notice-img">
                  <svg t="1705903486285" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="5565" width="20" height="20">
                    <path
                        d="M643.072 97.28c-20.48-12.8-45.568-14.848-70.656-3.072l-322.56 188.928h-158.72c-36.864 0-67.072 30.208-67.072 67.072v340.48c0 36.864 30.208 67.072 67.072 67.072h158.72l325.12 190.464c9.216 4.608 19.456 6.656 29.696 6.656 13.312 0 26.624-3.584 37.888-11.264 20.48-12.8 32.768-35.328 32.768-59.392v-727.04c0-24.576-12.288-47.104-32.256-59.904zM225.28 689.664l-133.12 1.024-1.024-338.944H225.28v337.92z m381.44 197.632l-313.344-183.808V336.896l312.32-182.784 1.536 730.112-0.512 3.072z m389.12-377.344c0 18.944-15.36 34.304-34.304 34.304h-155.648a34.304 34.304 0 0 1 0-68.608h155.648c18.944 0 34.304 15.36 34.304 34.304z m-218.624-174.08c-10.24-15.872-6.144-36.864 9.216-47.104L921.6 198.656c15.872-10.752 36.864-6.144 47.104 9.216 10.24 15.872 6.144 36.864-9.216 47.104L824.32 345.088c-5.632 4.096-12.288 5.632-18.944 5.632-10.752 0.512-21.504-4.608-28.16-14.848z m182.272 428.544c15.872 10.24 19.968 31.744 9.216 47.104-6.656 9.728-17.408 15.36-28.672 15.36-6.656 0-13.312-2.048-18.944-5.632l-135.168-90.112c-15.872-10.24-19.968-31.744-9.216-47.104 10.24-15.872 31.744-19.968 47.104-9.216l135.68 89.6z"
                        p-id="5566" :fill="textColor"></path>
                  </svg>
                </div>
                <div class="notice-bar-container">
                  <div class="notice-bar__wrap">
                    <div class="notice-bar__wrap_text">{{ noticeContent }}</div>
                  </div>
                </div>
                <div class="notice-detail" @click="noticeDetail">查看详情</div>
              </div>
            </div>
            <div class="mr10">
              <!-- <el-tooltip class="box-item" effect="dark" content="注册说明"> -->
              <div @click="register">
                <svg t="1720060715524" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4279" width="23" height="23">
                  <path
                      d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 960a448 448 0 1 1 448-448 448 448 0 0 1-448 448z"
                      fill="#ffffff" p-id="4280"></path>
                  <path
                      d="M512 222.08a168 168 0 0 0-167.68 167.68 32 32 0 0 0 64 0A103.68 103.68 0 1 1 512 493.76a36.8 36.8 0 0 0-34.24 34.24v139.2a32 32 0 0 0 64 0v-112.64A167.68 167.68 0 0 0 512 222.08z"
                      fill="#ffffff" p-id="4281"></path>
                  <path d="M509.76 785.6m-46.72 0a46.72 46.72 0 1 0 93.44 0 46.72 46.72 0 1 0-93.44 0Z" fill="#ffffff"
                        p-id="4282"></path>
                </svg>
              </div>
              <!-- </el-tooltip> -->
            </div>
            <div class="pr" v-if="taskNum != 0 && showTaskNumFlag" @click="taskskip">
              <div class="pa tips_cur">{{ taskNum }}</div>
              <div>
                <el-icon :color="textColor" size="23">
                  <Bell />
                </el-icon>
              </div>
            </div>
            <div class="right">
              <!-- 颜色选择区域 -->
              <!-- <div class="color">
                                <div class="color1" @click="color(0)"></div>
                                <div class="color2" @click="color(1)"></div>
                                <div class="color3" @click="color(2)"></div>
                                <div class="color4" @click="color(3)"></div>
                                <div class="color5" @click="color(4)"></div>
                            </div> -->
              <el-dropdown class="custom_dropdown pl10">
                <span class="el-dropdown-link" :style="{ color: `${textColor}` }">
                  <svg t="1705894614541" class="them_icon icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="4507" width="24" height="24">
                    <path
                        d="M986.543158 252.766316c-32.875789-30.181053-141.204211-134.736842-152.791579-144.437895a94.315789 94.315789 0 0 0-61.44-31.528421 85.692632 85.692632 0 0 0-65.751579 26.947368l-75.722105 72.218948a248.724211 248.724211 0 0 1-118.837895 26.947368 250.071579 250.071579 0 0 1-118.837895-26.947368l-75.722105-71.949474a85.423158 85.423158 0 0 0-65.751579-26.947368A94.315789 94.315789 0 0 0 190.248421 107.789474c-11.587368 11.048421-119.915789 114.256842-152.791579 144.437894a71.410526 71.410526 0 0 0-24.791579 50.661053 84.345263 84.345263 0 0 0 22.63579 57.397895L134.736842 455.410526a69.254737 69.254737 0 0 0 77.069474 14.282106V835.368421A103.747368 103.747368 0 0 0 242.526316 912.168421a146.863158 146.863158 0 0 0 97.28 35.301053h344.117895A147.671579 147.671579 0 0 0 781.473684 912.168421 103.747368 103.747368 0 0 0 812.463158 835.368421V469.692632A69.254737 69.254737 0 0 0 889.263158 455.410526l100.513684-95.663158a85.692632 85.692632 0 0 0 21.288421-56.32 71.410526 71.410526 0 0 0-24.522105-50.661052z m-35.031579 68.985263l-99.43579 94.854737a16.976842 16.976842 0 0 1-21.557894 2.155789l-26.947369-26.947368a26.947368 26.947368 0 0 0-29.372631-5.928421 26.947368 26.947368 0 0 0-16.707369 24.791579V835.368421a50.122105 50.122105 0 0 1-14.012631 37.99579 94.046316 94.046316 0 0 1-63.056842 20.210526H341.423158a94.585263 94.585263 0 0 1-61.978947-20.210526A50.122105 50.122105 0 0 1 265.431579 835.368421V411.755789a26.947368 26.947368 0 0 0-46.08-18.863157l-26.947368 26.947368a16.976842 16.976842 0 0 1-21.827369-2.155789L73.835789 323.368421a19.671579 19.671579 0 0 1 0-30.72C107.789474 260.311579 223.393684 151.174737 228.244211 146.593684l2.425263-2.425263a41.229474 41.229474 0 0 1 24.252631-13.473684 33.684211 33.684211 0 0 1 25.061053 12.126316c48.505263 45.810526 78.416842 74.374737 78.416842 74.374736l3.772632 2.964211a291.301053 291.301053 0 0 0 147.941052 36.648421h3.772632a291.301053 291.301053 0 0 0 147.941052-36.648421l3.772632-2.964211s29.911579-26.947368 78.147368-74.374736a33.953684 33.953684 0 0 1 25.061053-12.126316 39.612632 39.612632 0 0 1 24.522105 13.473684l2.425263 2.425263c4.850526 4.581053 119.376842 113.717895 154.408422 146.054737a18.863158 18.863158 0 0 1 1.347368 29.103158z"
                        p-id="4508"></path>
                  </svg>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="df">
                    <el-dropdown-item style="padding: 5px">
                      <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #333"
                           @click="color(0)"></div>
                    </el-dropdown-item>
                    <el-dropdown-item style="padding: 5px">
                      <div style="width: 20px; height: 20px; background-color: #2e5882; border: 1px solid #333"
                           @click="color(1)"></div>
                    </el-dropdown-item>
                    <el-dropdown-item style="padding: 5px">
                      <div style="width: 20px; height: 20px; background-color: #2d3283; border: 1px solid #333"
                           @click="color(2)"></div>
                    </el-dropdown-item>
                    <el-dropdown-item style="padding: 5px">
                      <div style="width: 20px; height: 20px; background-color: #2e7682; border: 1px solid #333"
                           @click="color(3)"></div>
                    </el-dropdown-item>
                    <el-dropdown-item style="padding: 5px">
                      <div style="width: 20px; height: 20px; background-color: #2e8366; border: 1px solid #333"
                           @click="color(4)"></div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <img v-if="formPersonDetail.photo != null" class="avatar" :src="formPersonDetail.photo" alt="" />
              <img v-else class="avatar" src="../assets/images/avtor.png" alt="" />
              <!-- <span class="username" :style="{ color: `${textColor}` }">用户名</span> -->
              <el-dropdown class="custom_dropdown">
                <span class="el-dropdown-link" :style="{ color: `${textColor}` }">
                  <div class="df">
                    <div class="nameD">
                      {{ formPersonDetail.name }}
                    </div>
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </div>
                </span>

                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="infoBtn">个人信息</el-dropdown-item>
                    <el-dropdown-item @click="PushLogin">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <!-- 主要路由 -->
        <el-main>
          <router-view></router-view>
          <div class="mask" v-if="showflag == false" @click.capture="mask"></div>
          <div class="info pl30 pr30" v-if="showflag == false">
            <p style="line-height: 50px; font-size: 16px; font-weight: bold" class="main_text">个人信息</p>
            <div class="info_mian p20">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="账号管理" name="first">
                  <el-form :model="formPersonDetail" label-width="120" label-position="left" style="width: 40%"
                           :rules="rulesEditUser" ref="editUserRef">
                    <el-form-item label="头像：">
                      <div class="df aie">
                        <div class="uploadHome mr10">
                          <el-icon class="addHome">
                            <Plus />
                          </el-icon>
                          <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1"
                                     :on-change="changeFile">
                            <img v-if="formPersonDetail.photo" class="el-upload-list__item-thumbnail"
                                 :src="formPersonDetail.photo" alt="" />
                            <el-icon v-else>
                              <Plus />
                            </el-icon>
                          </el-upload>
                        </div>
                        <span
                            style="color: #cacaca; font-size: 12px; width: 70%; line-height: 18px">仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M</span>
                      </div>
                    </el-form-item>
                    <el-form-item label="账号(手机号)：">
                      <el-input v-model="formPersonDetail.mobile" placeholder="账号：" disabled />
                    </el-form-item>
                    <el-form-item label="员工编号：">
                      <el-input v-model="formPersonDetail.employeeNo" placeholder="员工编号：" disabled />
                    </el-form-item>
                    <el-form-item label="用户名：" prop="name">
                      <el-input v-model="formPersonDetail.name" placeholder="用户名：" />
                    </el-form-item>
                    <el-form-item label="性别：" prop="gender">
                      <el-radio-group v-model="formPersonDetail.gender">
                        <el-radio label="男" />
                        <el-radio label="女" />
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="国籍：" prop="nationality">
                      <el-select v-model="formPersonDetail.nationality" placeholder="国籍" style="width: 100%">
                        <el-option label="中国大陆" value="中国大陆" />
                        <el-option label="香港" value="香港" />
                        <el-option label="台北" value="台北" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="生日：" prop="birthday">
                      <el-date-picker v-model="formPersonDetail.birthday" type="date" placeholder="生日"
                                      @change="changeBrithday" format="YYYY/MM/DD" style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="住址" prop="address">
                      <el-cascader placeholder="选择住址" v-model="formPersonDetail.address" :options="options" filterable
                                   style="width: 100%" />
                    </el-form-item>
                    <el-form-item label="详细地址：">
                      <el-input v-model="formPersonDetail.addressD" placeholder="详细地址" />
                    </el-form-item>
                    <div class="df jcc mb20">
                      <!-- <el-button type="primary" plain>&nbsp;重置&nbsp;</el-button> -->
                      <el-button type="primary" @click="submitInfo(editUserRef)"
                                 :loading="loading">&nbsp;提交&nbsp;</el-button>
                    </div>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="密码管理" name="second">
                  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" label-position="left"
                           class="demo-ruleForm" style="width: 40%">
                    <el-form-item label="旧密码：" prop="oldPass">
                      <el-input v-model="ruleForm.oldPass" placeholder="输入旧密码" show-password> </el-input>
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newPass">
                      <el-input v-model="ruleForm.newPass" placeholder="输入新密码" show-password> </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="resPass">
                      <el-input v-model="ruleForm.resPass" placeholder="输入密码" show-password> </el-input>
                    </el-form-item>
                    <el-form-item>
                      <!-- <el-button @click="resetForm(ruleFormRef)">重置</el-button> -->
                      <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="订单发票" name="three" v-if="isShopFlag === 'false'">
                  <div class="money df jcsb mt10">
                    <div class="money_li pt10 pb10 pl20 pr20" v-for="item in scanResidue" :key="item.id">
                      <p style="color: #b2b2b2">{{ item.type }} - 剩余次数</p>
                      <div class="df jcsb aic">
                        <p style="
                            height: 60px;
                            line-height: 60px;
                            font-size: 24px;
                            border-bottom: 1px dashed #e5e6eb;
                            width: 100%;
                          ">
                          {{ item.leftNum }}&nbsp;
                          <el-button type="primary" link @click="freeLed(item)">首次免费领</el-button>
                        </p>
                        <!-- <img style="width: 46px;" src='../assets/images/Scan1.png' alt=""> -->
                      </div>
                      <p style="color: #b2b2b2; font-size: 14px; margin-top: 10px">
                        累计使用识别数
                        <span style="color: #000">{{ item.used }}</span>
                        累计购买识别数
                        <span style="color: #000">{{ item.leftNum + item.used }}</span>
                      </p>
                    </div>
                    <div style="width: 32%"></div>
                  </div>
                  <div class="mt20 df aic">
                    <div class="lineBlue"></div>
                    <p class="ml10" style="color: #3d3d3d">支付明细</p>
                  </div>
                  <el-table :data="tableData" style="width: 100%" border class="mt20" max-height="418">
                    <!-- <el-table-column type="selection" width="50" /> -->
                    <el-table-column label="编号" prop="id" />
                    <!-- <el-table-column label="订单编号" prop="id" /> -->
                    <el-table-column label="商品信息" prop="type" />
                    <el-table-column label="操作次数" prop="num" />
                    <el-table-column label="剩余次数" prop="leftNum" />
                    <el-table-column label="金额" prop="fee" />
                    <el-table-column label="操作人" prop="name" />
                    <el-table-column label="操作时间" prop="createdAt" />
                    <!-- <el-table-column label="订单状态" prop="id" /> -->
                    <!-- <el-table-column label="操作" fixed="right">
                                            <template #default="props">
                                                <el-button size="small" plain type="primary"
                                                    >过磅</el-button
                                                >
                                                <el-button size="small" type="primary"
                                                    >查看</el-button
                                                >
                                            </template>
                                        </el-table-column> -->
                    <!-- #################################### 分页 #################################### -->
                  </el-table>

                  <!-- 分页器 -->
                  <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                              @change="handleCurrentChange" />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div class="mes_box">
    <div class="mes_box1" v-for="(item, index) in messageList" :key="index">
      <div v-show="item.show" class="mes_min_box">
        <p style="color: #333; font-size: 18px">
          收到新消息
          <span style="font-size: 14px; color: #9e9e9e">(未读：{{ item.unreadCount }})</span>
        </p>
        <p class="mes_content">{{ item.nick }}:{{ item.messageForShow }}</p>
        <div class="mes_look" @click="lookMes(item)">
          点击此处查看
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <div class="mes_del" @click="delMes(item, index)">
          <el-icon color="#818181">
            <CloseBold />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MD5 } from 'crypto-js';
import Menu from '@/components/Menu.vue';
import BreadCrumbCom from '@/components/BreadCrumbCom.vue';
import { ArrowRight, CloseBold } from '@element-plus/icons-vue';
import { ArrowDown, Plus, Bell, Lock, ChatDotSquare } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, onBeforeUpdate } from 'vue';
import type { UploadFile } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { formatTime, formatTimeAll } from '../filters/index';
import { changeColor } from '../hooks/changeColor';
import type { TabsPaneContext } from 'element-plus';
import TencentCloudChat from '@tencentcloud/chat';
let { backgroundColor, textColor, maintextColor, btnColor, tableNoChecked, tableChecked, tableTitle, mainColor, color } =
    changeColor();
import { useRouter } from 'vue-router';
const router = useRouter();
const beCloseMes = ref([]);
const isServer = ref(false); //判断当前页面是否是客服页面
let isChat = ref(false); //用于标识是否为客服
let IMoptions = {
  SDKAppID: 1600039604, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
};
let chat = TencentCloudChat.create(IMoptions); // SDK 实例通常用 chat 表示
const messageList = ref<any>([]);
// 监听消息
let onMessageReceived = function (event: any) {
  // 判断当前页是不是客服页
  if (!isServer.value) {
    messageList.value = [];
    console.log('消息改变', isChat.value);
    isChat.value ? requestServerMes() : '';
  }
};
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
const requestServerMes = () => {
  console.log('聊天新消息', isChat.value);

  let promiseList = chat.getConversationList();
  promiseList.then(function (imResponse) {
    let totalUnreadCount = chat.getConversationList();
    totalUnreadCount.then(function (imResponse) {
      // console.log(555555555555555555, imResponse.data.conversationList);
      messageList.value = [];
      for (let i = 0; i < imResponse.data.conversationList.length; i++) {
        if (imResponse.data.conversationList[i].unreadCount > 0) {
          messageList.value.push(imResponse.data.conversationList[i].lastMessage);
          messageList.value[messageList.value.length - 1].unreadCount = imResponse.data.conversationList[i].unreadCount;
          messageList.value[messageList.value.length - 1].nick = imResponse.data.conversationList[i].userProfile.nick;
          messageList.value[messageList.value.length - 1].show = true;
          messageList.value[messageList.value.length - 1].conversationID =
              imResponse.data.conversationList[i].conversationID;
          console.log('获取获取获取获取获取获取获取获取获取获取获取获取', messageList.value);
          messageList.value = messageList.value.reverse();
          beCloseMes.value = messageList.value;
        }
      }
    });
  });
};
const mesUrl = ref('');
// 监听路由的切换
router.beforeEach((to, from, next) => {
  // 获取当前路由
  mesUrl.value = to.fullPath;
  // 判断当前是否在客服页面
  if (mesUrl.value.indexOf('/store/call_center') !== -1) {
    beCloseMes.value = messageList.value;
    messageList.value = [];
    isServer.value = true;
    next(true);
  } else {
    isServer.value = false;
    // 如果不是在客服页面，就判断有无客服权限
    isChat.value ? requestServerMes() : '';
    next(true);
  }
});
/**
 * 点击关闭消息
 */
const delMes = (item: any, index: number) => {
  item.show = false;
};
const lookMes = (item: any) => {
  console.log('查看消息', item);
  router.push('/store/call_center?id=' + item.conversationID);
};
onMounted(() => {
  getWindowResize();
  window.addEventListener('resize', getWindowResize);
  console.log('获取当前路由，', window.location.pathname);
  let routeMes = JSON.stringify(localStorage.getItem('roleRoutes'));
  if (
      routeMes.indexOf('../views/plateform/Service/call_center.vue') != -1 ||
      routeMes.indexOf('/store/call_center') != -1
  ) {
    isChat.value = true;
    if (window.location.pathname != '/store/call_center') {
      //获取用户im收到的未读消息
      setTimeout(() => {
        //   获取im
        // console.log("获取试试看呢");
        requestServerMes();
      }, 1000);
    }
  }

  if (localStorage.getItem('colorList')) {
    // console.log(123, backgroundColor)
    const colorList = JSON.parse(localStorage.getItem('colorList'));
    backgroundColor.value = colorList.backgroundColor;
    textColor.value = colorList.textColor;
    maintextColor.value = colorList.maintextColor;
    btnColor.value = colorList.btnColor;
    tableNoChecked.value = colorList.tableNoChecked;
    tableChecked.value = colorList.tableChecked;
    tableTitle.value = colorList.tableTitle;
    mainColor.value = colorList.mainColor;
  }
});
import {
  RequestPersonDetail,
  RequestPersonSave,
  RequestLoginAccountUpdatePassword,
  RequestRecognizeLeft,
  RequestLogout,
  RequestRecognizeLogGetlistlimit,
  RequestRecognizeLeftFirstUse,
  RequestActivitiAcitvitiGetPersonTaskCount,
  RequestShopMessageGetLatestMessage,
  RequestAgreementGetAgreementUseLocation,
} from '@/api/path/index.js';
let menuButton = ref<any>(true);
const menuShrink = () => {
  menuButton.value = !menuButton.value;
};
import { regionData } from 'element-china-area-data'; //获取地区
const options = regionData; /* 获取地区---国内 */
const taskNum = ref<any>();
const isShopFlag = ref<any>(false)
const getData = () => {
  isShopFlag.value = localStorage.getItem('isShop')
  regionData.forEach((item: any) => {
    item.value = item.label;
    item.children.forEach((val: any) => {
      val.value = val.label;
      val.children.forEach((v: any) => {
        v.value = v.label;
      });
    });
  });
  RequestShopMessageGetLatestMessage().then((res: any) => {
    if (res.success == true) {
      noticeContent.value = res.resultObj;
    }
  });
};
const taskskip = () => {
  location.href = '/Audit/Audit_list';
};
getData();
/* 退出登录 */
const PushLogin = () => {
  return new Promise((resolve) => {
    RequestLogout();
    setTimeout(() => {
      if (localStorage.getItem('isShop') == 'true') {
        // window.location.reload(); //刷新页面跳转回登录页面
        window.location.href = '/login';
      } else {
        window.location.reload(); //刷新页面跳转回登录页面
        window.location.href = '/erpLogin';
      }
      localStorage.removeItem('TOKEN'); //清楚tokeen
      localStorage.removeItem('roleInfo'); //清楚用户信息
      localStorage.removeItem('roleRoutes'); //清楚用户对应的权限菜单

      resolve('');
    }, 200);
  });
};
/* ****************************** 个人信息--账号信息 *******************************/
const showflag = ref<Boolean>(true);
const infoBtn = () => {
  showflag.value = false;
  RequestRecognizeLogGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTimeAll(item.createdAt);
      // console.log(item);
      if (item.num != -1) {
        item.num = '+' + item.num;
      }
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
  RequestRecognizeLeft(userInfo.id).then((res: any) => {
    res.resultObj.length = res.resultObj.length - 2;
    scanResidue.value = res.resultObj;
    // console.log('scanResidue.value', scanResidue.value);
  });
};
const activeName = ref<any>('first');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const formPersonDetail = ref<any>({});
const mask = () => {
  showflag.value = true;
};
const avatarImg = ref<any>('');
const changeFile = (file: UploadFile) => {
  avatarImg.value = file.raw;
};
const userInfo = JSON.parse(localStorage.getItem('roleInfo')!);
const getPersonDetail = () => {
  // console.log('userInfo', userInfo.person);
  RequestPersonDetail(userInfo.person).then((res: any) => {
    if (res.resultObj.nationality != null) {
      res.resultObj.nationality = res.resultObj.nationality[0];
    }
    formPersonDetail.value = res.resultObj;
    formPersonDetail.value.employeeNo = userInfo.employeeNo;
    localStorage.setItem('userMes', JSON.stringify(res.resultObj));
  });
};
getPersonDetail();
/* 提交修改的个人信息 */

const changeBrithday = (e: any) => {
  if (formPersonDetail.value.birthday != null) {
    formPersonDetail.value.birthday = formatTime(e);
  } else {
    formPersonDetail.value.birthday = null;
  }
};
const loading = ref<any>(false);
const editUserRef = ref<any>();
const rulesEditUser = reactive<any>({
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  nationality: [{ required: true, message: '请选择国籍', trigger: 'change' }],
  birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
  address: [{ required: true, message: '请选择地址', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
});

const submitInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formPersonDetail.value.birthday != null) {
        formPersonDetail.value.birthday = formPersonDetail.value.birthday.substring(0, 10);
      }
      if (formPersonDetail.value.address != null) {
        formPersonDetail.value.address = JSON.stringify(formPersonDetail.value.address);
      }
      if (formPersonDetail.value.nationality != null) {
        formPersonDetail.value.nationality = [formPersonDetail.value.nationality];
      } else {
        formPersonDetail.value.nationality = null;
      }
      // loading.value = true
      console.log(formPersonDetail.value);
      const bold = new Blob(
          [
            JSON.stringify({
              birthday: formPersonDetail.value.birthday,
              addressD: formPersonDetail.value.addressD,
              employeeNo: formPersonDetail.value.employeeNo,
              gender: formPersonDetail.value.gender,
              mobile: formPersonDetail.value.mobile,
              name: formPersonDetail.value.name,
              address: formPersonDetail.value.address,
              nationality: formPersonDetail.value.nationality,
              id: userInfo.person,
            }),
          ],
          {
            type: 'application/json;charset=UTF-8',
          },
      );
      let info = new FormData();
      info.append('person', bold);
      info.append('img', avatarImg.value);
      RequestPersonSave(info).then((res: any) => {
        if (res.success == true) {
          ElMessage.success(res.msg);
          //其它处理代码
          // loading.value = false
          getPersonDetail();
          // setTimeout(() => {
          //     showflag.value = true
          // }, 500)
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

/* ****************************** 个人信息--账号密码 *******************************/
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<any>({
  oldPass: '',
  newPass: '',
  resPass: '',
});
const repeatValidate = (rule: any, value: any, callback: any) => {
  if (value !== ruleForm.newPass) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};
const newValValidate = (rule: any, value: string, callback: any) => {
  if (value === ruleForm.oldPass) {
    callback(new Error('新密码不能与旧密码一致'));
  } else if (/^.{6,12}$/g.test(value)) {
    callback();
  } else {
    callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'));
  }
};
const rules = reactive<any>({
  oldPass: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    // { pattern: /^[0-9]{6,12}$/, message: "请输入6-12位的数字", trigger: "blur" }
  ],
  newPass: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator: newValValidate, trigger: 'blur' },
  ],
  resPass: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { validator: repeatValidate, trigger: 'blur' },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const newLoginAcc = new FormData();
      newLoginAcc.append('account', formPersonDetail.value.mobile);
      newLoginAcc.append('oldPassword', MD5(ruleForm.oldPass).toString());
      newLoginAcc.append('newPassword', MD5(ruleForm.resPass).toString());
      RequestLoginAccountUpdatePassword(newLoginAcc).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.msg + ',即将跳转到登录页面');
          //其它处理代码
          setTimeout(() => {
            if (localStorage.getItem('isShop') == 'true') {
              location.href = '/login';
              localStorage.clear();
            } else {
              location.href = '/erpLogin';
              localStorage.clear();
            }
          }, 500);
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
/* ****************************** 消息通知 *******************************/
const noticeContent = ref<any>('');
const noticeDetail = () => {
  router.push('/Shop/Information/messageNotification');
};
/* ****************************** 主路由最小宽度 *******************************/
// 屏幕宽度
// const windowWidth = ref(0)
// // 屏幕高度
// const windowHeight = ref(0)
// const width = ref<any>()
// // 生命周期·
// // onMounted(() => {
// //     getWindowResize()
// //     window.addEventListener('resize', getWindowResize)
// // })
// document.body.style!.zoom = 0.8
// window.onload = window.onresize = function () {
//     // 获取网页大小
//     let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
//     // 判断窗口宽度是否小于等于笔记本大小（假设笔记本大小为1200像素）
//     if (windowWidth <= 1200) {
//         // 就让页面缩放成0.7倍
//         document.body.style!.zoom = 0.8
//     }
// }
/* ****************************** 订单发票 *******************************/
/* 分页器 */
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  infoBtn();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  infoBtn();
};
/* ************* 获取列表数据 ************* */
const total = ref<any>(1);
const currentPage = ref(1);
const pageSize = ref(6);
const tableData = ref<any>([]);
/* ************* 扫描剩余次数 ************* */
const scanResidue = ref<any>([]);
const getScanResidueData = () => {
  RequestActivitiAcitvitiGetPersonTaskCount(JSON.parse(localStorage.getItem('roleInfo')!).id).then((res: any) => {
    // console.log('个人任务中兴', res);
    if (res.success == true) {
      if (res.resultObj > 100) {
        taskNum.value = 99;
      } else {
        taskNum.value = res.resultObj;
      }
    }
  });
};
const showTaskNumFlag = ref<any>(false);
const showTaskNum = () => {
  if (localStorage.getItem('roleRoutes')!.includes('审核列表')) {
    showTaskNumFlag.value = true;
  } else {
    showTaskNumFlag.value = false;
  }
};
showTaskNum();
getScanResidueData();
setInterval(function () {
  getScanResidueData();
}, 10000);
const freeLed = (event: any) => {
  console.log(event);
  RequestRecognizeLeftFirstUse(event.type).then((res: any) => {
    console.log(res.resultObj);
    if (res.success == true) {
      ElMessage.success(res.resultObj);
      getScanResidueData();
    } else {
      ElMessage.success(res.msg);
    }
  });
};

// 屏幕宽度
const windowWidth = ref(0);
// 屏幕高度
const windowHeight = ref(0);
const width = ref<any>();
const height = ref<any>();
// 获取屏幕尺寸
const getWindowResize = function () {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;
  if (windowWidth.value >= 1200) {
    width.value = '100%';
  } else {
    width.value = '1200px';
  }
  if (windowHeight.value >= 860) {
    height.value = '100%';
  } else {
    height.value = '860px';
  }
  console.log('高度高度高度高度高度高度高度高度高度高度高度高度', height.value);
};

/*--------------------------------- 注册说明 ---------------------------------*/
const register = () => {
  RequestAgreementGetAgreementUseLocation('注册说明').then((res: any) => {
    if (res.success == true) {
      res.resultObj.forEach((item: any) => {
        const routerResolve = router.resolve(`/PDF_preview?file=` + item);
        window.open(routerResolve.href, '_blank');
      });
    }
  });
};
</script>

<style lang="scss">
@import '@/assets/css/media.scss';

.g-container {
  width: 100%;
  height: 100%;
}

.search_box1 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5px;
}

.self_adaption {
  // width: v-bind(width);
  //height: v-bind(height);
  height: 100%;
  overflow: hidden;
}

.mes_box {
  position: fixed;
  bottom: 30px;
  right: 0;
  width: 430px;
  z-index: 99;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;

  .mes_box1 {
    margin-top: -87px;
  }

  .mes_min_box {
    width: 400px;
    height: 100px;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 8px 24px rgb(132, 150, 167, 0.2);
    border-radius: 5px;
    position: relative;
  }

  .mes_min_box:first-child {
    margin-top: 0 !important;
  }

  .mes_content {
    width: calc(100% - 90px);
    color: #9e9e9e;
    font-size: 14px;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }

  .mes_look {
    font-size: 12px;
    bottom: 30px;
    right: 0;
    color: #006eff;
    position: absolute;
    width: 90px;
    display: flex;
    align-items: center;
  }

  .mes_del {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

.money {
  width: 100%;

  .money_li {
    width: 32%;
    border: 1px solid #ebeef5;
  }
}

/**
 * 搜索区域
 */
.g-search {
  width: 100%;
  position: relative;
  margin: 0 auto 30px;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;

  .demonstration {
    display: inline-block;
    font-size: 14px;
    color: #898989;
    margin-right: 5px;
  }

  .all_select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .input_valye {
      margin-bottom: 10px;
    }

    .el-select {
      width: 140px;
      margin-right: 20px;
    }

    .input {
      width: 130px;
      height: 29px;
      margin-right: 20px;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      padding-left: 10px;
    }

    .input::placeholder {
      font-size: 14px;
      color: #a8abb9;
    }
  }

  .bottom_btn {
    width: 200px;
    margin-top: 15px;
    display: flex;
    align-items: center;

    flex-wrap: nowrap;
  }
}

/**
 * 表格区域
 */
.table {
  width: calc(100% - 12px);
  height: 490px;
  background: #fff;
  padding: 12px;

  .nav {
    width: 100%;
    height: 40px;
    border-bottom: 2px solid #f0f0f0;

    .nav_ul {
      display: flex;
      padding: 0;
      margin-left: 10px;

      .nav_li {
        height: 40px;
        list-style: none;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #5b5b5b;
        margin-left: 10px;
      }

      .navlist {
        border-bottom: 2px solid #579aff;
      }
    }
  }

  .table_function {
    margin: 20px 10px;

    // .addHome {
    //   width: 60px;
    //   height: 30px;
    //   background: #116cf8;
    //   color: #fff;
    //   border-radius: 5px;
    //   border: 0;
    //   margin-left: 20px;
    // }

    .delete {
      width: 60px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid #116cf8;
      color: #116cf8;
      margin-left: 10px;
      background: #fff;
    }

    .delete_all {
      width: 100px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid #d2d6dc;
      color: #d2d6dc;
      margin-left: 10px;
      background: #ffffff;
    }
  }

  .deposit {
    color: #5b91fa;
  }

  .delete_btn {
    color: #f58556;
  }

  .download {
    color: #526ca4;
    text-decoration: underline;
  }
}

.publish {
  width: 70%;
  height: 80%;
  background: #fff;
  position: fixed;
  top: 10%;
  left: 50%;
  margin-left: -35%;
  z-index: 99;
  overflow-y: scroll;

  .publish1 {
    position: relative;
    padding-bottom: 60px;
  }
}

// 遮罩层
#mask {
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background: rgb(116, 116, 116, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}

// 遮罩层
#mask1 {
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background: rgb(116, 116, 116, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}

.els {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: space-between;
}

.page {
  margin-top: 30px;
}

.btn_center {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.common-layout {
  //width: 100vw;
  //height: 100vh;
}

.el-aside {
  height: 100vh;
  max-width: 200px;
}

.el-header {
  height: 70px;
  font-size: 26px;
  text-align: center;
  line-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid #f0f6fe;
  // width: v-bind(width);

  .left {
    display: flex;
    align-items: center;

    .shrink {
      margin-left: 10px;
      float: left;
    }

    .bread {
      float: left;
    }

    /* 展开收缩动态 */
    .icon path {
      fill: v-bind(textColor);
    }
  }

  .right {
    display: flex;
    align-items: center;
    margin-right: 2%;

    .color {
      display: flex;
      align-items: center;

      .color1 {
        width: 20px;
        height: 20px;
        background: #fff;
        margin-right: 10px;
        border: 1px solid rgb(121, 121, 121);
      }

      .color2 {
        width: 20px;
        height: 20px;
        background: #2e5882;
        margin-right: 10px;
        border: 1px solid rgb(121, 121, 121);
      }

      .color3 {
        width: 20px;
        height: 20px;
        background: #2d3283;
        margin-right: 10px;
        border: 1px solid rgb(121, 121, 121);
      }

      .color4 {
        width: 20px;
        height: 20px;
        background: #2e7682;
        margin-right: 10px;
        border: 1px solid rgb(121, 121, 121);
      }

      .color5 {
        width: 20px;
        height: 20px;
        background: #2e8366;
        margin-right: 10px;
        border: 1px solid rgb(121, 121, 121);
      }
    }

    .username {
      display: block;
      margin-left: 5px;
      font-size: 13px;
      color: #656565;
    }
  }
}

.el-sub-menu .el-menu {

  // padding: 0 0 0 20px;
  .el-sub-menu {
    .el-sub-menu__title {
      margin-left: 20px;
    }

    .el-menu-item {
      padding-left: 80px !important;
    }
  }

  .el-menu-item {
    padding-left: 60px !important;
  }
}

.el-sub-menu .el-menu {

  // padding: 0 0 0 20px;
  .el-sub-menu {
    .el-sub-menu__title {
      margin-left: 20px;
    }

    .el-menu-item {
      padding-left: 80px !important;
    }
  }

  .el-menu-item {
    padding-left: 60px !important;
  }
}

.custom_dropdown .el-dropdown-link {
  outline: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.nameD {
  width: 60px;
  /* 定义容器宽度 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 隐藏溢出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

.el-main {
  //height: calc(100vh - 100px);
  background: v-bind(mainColor);
  background-size: 100% 100%;
  padding: 10px 30px;
  position: relative;
  //padding: 5px 6px;

  // width: v-bind(width);

  /* 个人信息静态页面 */
  .mask {
    // pointer-events: none; /* 穿透遮罩 */
    width: 100vw;
    height: 100vh;
    // background: #ccc;
    position: fixed;
    top: 0;
    left: 0;
  }

  .info {
    width: 100%;
    height: 100%;
    background-color: #e8eef4;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;

    .info_mian {
      width: 100%;
      background-color: #fff;

      .el-input__prefix-inner> :first-child,
      .el-input__prefix-inner> :first-child.el-input__icon {
        position: absolute;
        right: 0;
        color: #116cf8;
        font-size: 16px;
      }

      .el-input__wrapper {
        width: 100%;
      }
    }
  }
}

:root {
  --background-color: #fff;
  --text-color: #116cf8;
}

/* 边沿蓝色，中间白色，字体蓝色 */
.hollow {
  border: 1px solid v-bind(btnColor) !important;
  color: v-bind(btnColor) !important;
  padding: 8px 15px !important;
  background: #fff !important;
  cursor: pointer;
  border-radius: 4px;
}

/* 实心蓝色背景，字体白色 */
.solid {
  background: v-bind(btnColor) !important;
  color: #fff !important;
  padding: 8px 15px !important;
  border: 1px solid v-bind(btnColor) !important;
  cursor: pointer;
  border-radius: 4px;
}

/* 灰色按钮 */
.forbidden {
  border: 1px solid #c3c8d0 !important;
  color: #c3c8d0 !important;
  padding: 8px 15px !important;
  cursor: pointer;
  border-radius: 4px;
}

/* 删除按钮 */
.del_btn {
  padding: 8px 15px !important;
  background: transparent;
  color: #f58556;
  border: 1px solid #f58556;
  cursor: pointer;
  border-radius: 4px;
}

/* 操作蓝色字体*/
.none {
  color: #116cf8 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 操作红色字体 */
.none_del {
  border-radius: 5px !important;
  color: #f58556 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 弹窗 */
.title1 {
  height: 60px;
  background: v-bind(btnColor);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0 30px;

  .title_mes {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-icon {
      font-size: 18px;
    }
  }

  .close {
    cursor: pointer;
  }
}

.del_tit {
  cursor: pointer;
}

.el-table th {
  background: v-bind(tableTitle) !important;

  .cell {
    color: #666 !important;
  }
}

/* 表格双数颜色 */
.warning-row {
  background: v-bind(tableNoChecked) !important;
}

/* 表格选中颜色 */
.check_table {
  background: v-bind(tableChecked) !important;
}

.content1 {
  padding: 0 40px;
}

.el-table th {
  background: v-bind(tableTitle) !important;

  .cell {
    color: #666 !important;
  }
}

/* 表格双数颜色 */
.warning-row {
  background: v-bind(tableNoChecked) !important;
}

/* 表格选中颜色 */
.check_table {
  background: v-bind(tableChecked) !important;
}

.content1 {
  padding: 0 40px;
}

// 输入框提示文字颜色
.input::placeholder {
  color: #666 !important;
}

.el-input__inner::placeholder {
  color: #666 !important;
}

// 主要字体颜色
.main_text {
  display: inline-block;
  // margin-top: 20px;
  color: v-bind(maintextColor) !important;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
}

.el-dialog {
  padding: 0 !important;
}

.el-dialog__footer {
  padding: 16px;
}

.el-dialog__body {
  padding: 20px 20px 0 20px;
}

.lineBlue {
  width: 6px;
  height: 23px;
  background-color: v-bind(btnColor);
}

// 弹出框颜色
.el-dialog__header {
  background-color: v-bind(btnColor) !important;
  margin-right: 0 !important;
  padding: 16px;

  .el-icon svg {
    color: #fff;
  }
}

.el-tabs__item.is-active {
  color: v-bind(btnColor) !important;
}

.el-tabs__active-bar {
  background-color: v-bind(btnColor) !important;
}

// 选项卡total
.el-badge__content,
.el-badge__content--primary is-fixed {
  background-color: v-bind(btnColor) !important;
}

.demonstration {
  color: #666 !important;
}

.el-menu-item.is-active {
  background-color: #d2dde9 !important;
}

/* 弹出框样式 */

/* elementPlus---按钮属性修改 */
.el-button--primary,
.el-button--primary:active {
  background: v-bind(btnColor);
  border: none;
  color: #fff;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background: v-bind(btnColor);
  border: none;
  color: #fff;
}

.el-button--primary.is-plain {
  border: 1px solid v-bind(btnColor);
  background-color: rgba($color: #000000, $alpha: 0);
  color: v-bind(btnColor);
}

.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  border: 1px solid v-bind(btnColor);
  background-color: rgba($color: #000000, $alpha: 0);
  color: v-bind(btnColor);
}

.el-button--primary.is-link {
  background-color: rgba($color: #000000, $alpha: 0);
  color: v-bind(btnColor);
}

.el-button--primary.is-link:hover,
.el-button--primary.is-link:focus {
  background-color: rgba($color: #000000, $alpha: 0);
  color: v-bind(btnColor);
}

/* 删除确认框 */
.el-popconfirm {
  .el-button--primary {
    background: v-bind(btnColor);
    border: none;
    color: red;
  }

  .el-button--primary:hover,
  .el-button--primary:focus {
    background: #f5f7fa;
    border: none;
    color: red;
  }

  .el-button--primary.is-plain {
    border: 1px solid v-bind(btnColor);
    background-color: transparent;
    color: v-bind(btnColor);
  }

  .el-button--primary.is-link {
    color: v-bind(btnColor);
  }
}

.them_icon {
  fill: v-bind(textColor);
}

/* 分页器样式 */
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .el-pager li.is-active {
  background-color: v-bind(btnColor) !important;
}

.el-pager li:hover,
.el-pagination button:hover {
  color: v-bind(btnColor);
}

.el-popconfirm {
  .el-button--primary {
    background: v-bind(btnColor);
    border: none;
    color: red;
  }

  .el-button--primary:hover,
  .el-button--primary:focus {
    background: #f5f7fa;
    border: none;
    color: red;
  }

  .el-button--primary.is-plain {
    border: 1px solid v-bind(btnColor);
    background-color: transparent;
    color: v-bind(btnColor);
  }

  .el-button--primary.is-link {
    color: v-bind(btnColor);
  }
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: v-bind(btnColor);
  border-color: v-bind(btnColor);
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: v-bind(btnColor);
  border-color: v-bind(btnColor);
}

/* 上传框 */
.uploadHome {
  width: 122px;
  height: 122px;
  border-radius: 6px;
  background-color: #fafafa;
  overflow: hidden;
  border: 1px dashed #cdd0d6;
  overflow: hidden;
  position: relative;

  .addHome {
    font-size: 36px;
    color: #cccccc;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
}

.uploadHome:hover {
  border: 1px dashed #116cf8;
  transition: 500ms;

  .addHome {
    color: #116cf8;
    transition: 500ms;
  }
}

.el-upload-list__item,
.el-upload-list__item-thumbnail,
.el-upload {
  width: 120px;
  height: 120px;
}

::v-deep .el-upload {
  opacity: 0;
}

.el-upload--picture-card {
  --el-upload-picture-card-size: 122px;
  background-color: var(--el-fill-color-lighter);
  border-radius: 6px;
  box-sizing: border-box;
  width: var(--el-upload-picture-card-size);
  height: var(--el-upload-picture-card-size);
  cursor: pointer;
  vertical-align: top;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  position: absolute;
  width: 122px;
  height: 122px;
  left: 0;
  top: 0;
  cursor: default;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: var(--el-overlay-color-lighter);
  transition: opacity var(--el-transition-duration);
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 122px;
  height: 122px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
}

/* 消息通知 */
.notic-bar {
  display: flex;
  border: 1px solid v-bind(textColor);
  margin: 5px;
  border-radius: 20px;
  padding: 2px 5px;
  line-height: 40px;
  width: 400px;
  height: 40px;
  display: flex;
  align-items: center;
  //@include responseTo('ipad') {
  //  display: none;
  //}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .notic-bar {
    display: none;
  }
}

.notice-bar-container {
  display: flex;
  width: calc(100% - 30px);
  overflow: hidden;
  margin-left: 5px;
}

.notice-img {
  padding-left: 6px;
  height: 40px;
  display: flex;
  align-items: center;
}

.notice-detail {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  width: 100px;
  padding-left: 6px;
  align-items: center;
  color: v-bind(textColor);
}

.notice-bar__wrap {
  margin-left: 10px;
  display: flex;
  animation: move 14s linear infinite;
  color: v-bind(textColor);

  .notice-bar__wrap_text {
    width: max-content;
    min-width: 100px;
    font-size: 14px;
  }
}

@keyframes move {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.el-cascader {
  width: 100%;
}

.tips_cur {
  height: 0.875rem;
  width: 0.875rem;
  background-color: red;
  border-radius: 50%;
  text-align: center;
  line-height: 0.875rem;
  font-size: 0.625rem;
  top: 2rem;
  color: #fff;
  z-index: 10;
  user-select: none;
  right: -0.25rem;
}

/* 隐藏滚动条 */
//.el-main::-webkit-scrollbar {
//  display: none !important;
//}
/* 隐藏数字输入框的上下箭头按钮 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}
</style>
